<template>
	<div class="HeaderNav">
		<router-link :to="{name:'home'}">首页</router-link>
		<router-link :to="{name:'tags'}">Tag管理</router-link>
		<router-link :to="{name:'fileup'}">文件上传</router-link>
		<!-- <template v-if="unlogin"> -->
		<template v-if="!userinfo">
			<router-link :to="{name:'login',query:{query:$route.fullPath}}">登陆</router-link>
			<router-link :to="{name:'register',query:{query:$route.fullPath}}">注册</router-link>
		</template>
		<template v-else>
			<a href="#">
				<span class="logined" style="color: goldenrod;font-weight: 900;">{{userTel}}</span>
			</a>
			<a href="#">
				<span class="logout" @click="logout">退出</span>
			</a>
		</template>
	</div>
</template>
<script>
	export default {
		name: "HeaderNav",
		computed: {
			userinfo() {
				return this.$store.state.userinfo;
			},
			userTel() {
				let userinfo = this.$store.state.userinfo;
				return userinfo ? userinfo.tel : "";
			}
		},
		methods: {
			async logout() {
				await this.$api.logout({});
				this.$store.commit("setUserInfo", ""); //清除用户登录信息
				if (this.$route.meta && this.$route.meta.requireAuth) {
					//当前页面组要登录才能访问，则跳转到登录页面；如果当前页面不需要登录就能访问，则不需要跳转
					this.$router.push({
						name: "login",
						query: {
							query: this.$route.query.query || ""
						}
					});
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.HeaderNav {
		a {
			padding: 15px;
			line-height: 20px;
			font-size: 18px;
		}

		a:hover {
			background: rgb(231, 231, 231) !important;
			color: rgb(66, 189, 86);
		}
	}
</style>
